<!-- FileMessage.vue -->
<template>
  <div class="file-message" @click="openPreview">
    <div class="file-icon">
      <i class="text-document-icon"></i>
    </div>
    <div class="file-details">
      <div class="file-name">{{ file.name }}</div>
      <div class="file-info">{{ formatFileSize(file.size) }}</div>
    </div>
  </div>
  
  <!-- 文件预览对话框 -->
  <FilePreview 
    v-if="previewVisible"
    :file="file" 
    v-model:visible="previewVisible" 
  />
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { 
  Document, 
  PictureFilled, 
  VideoCamera, 
  Headset, 
  Files, 
  DataAnalysis,
  View,
  Download
} from '@element-plus/icons-vue';
import FilePreview from './FilePreview.vue';

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
});

// 状态
const previewVisible = ref(false);
const thumbnailUrl = ref('');

// 文件类型检测
const isImage = computed(() => props.file.type?.startsWith('image/'));
const isPdf = computed(() => props.file.type === 'application/pdf');
const isText = computed(() => 
  props.file.type?.startsWith('text/') || 
  ['application/json', 'application/xml', 'application/javascript'].includes(props.file.type)
);
const isVideo = computed(() => props.file.type?.startsWith('video/'));
const isAudio = computed(() => props.file.type?.startsWith('audio/'));
const isCode = computed(() => {
  const codeExtensions = ['.js', '.ts', '.java', '.py', '.html', '.css', '.php', '.c', '.cpp', '.h', '.rb', '.go', '.rs'];
  return codeExtensions.some(ext => props.file.name.toLowerCase().endsWith(ext));
});

// 文件类型描述
const fileType = computed(() => {
  if (isImage.value) return '图片';
  if (isPdf.value) return 'PDF';
  if (isText.value) return 'text';
  if (isCode.value) return '代码';
  if (isVideo.value) return '视频';
  if (isAudio.value) return '音频';
  
  // 获取文件扩展名作为类型
  const fileExt = props.file.name.split('.').pop()?.toUpperCase();
  return fileExt || '文件';
});

// 打开预览
const openPreview = () => {
  previewVisible.value = true;
};

// 下载文件
const downloadFile = () => {
  const url = URL.createObjectURL(props.file);
  const a = document.createElement('a');
  a.href = url;
  a.download = props.file.name;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
};

// 文件大小格式化
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 Bytes';
  const k = 1024;
  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
};

// 生成缩略图
onMounted(() => {
  if (isImage.value) {
    thumbnailUrl.value = URL.createObjectURL(props.file);
  }
});

// 清理URL资源
onUnmounted(() => {
  if (thumbnailUrl.value) {
    URL.revokeObjectURL(thumbnailUrl.value);
  }
});
</script>

<style scoped>
.file-message {
  display: flex;
  align-items: center;
  //background-color: #2e3136;
  border-radius: 4px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin: 5px 0;
  max-width: 300px;
  color: #fff;
}

.file-message:hover {
  background-color: #36393f;
}

.file-icon {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4aa4f6;
  border-radius: 4px;
  margin-right: 12px;
  color: white;
  position: relative;
}

.text-document-icon {
  display: inline-block;
  width: 16px;
  height: 18px;
  background-color: white;
  border-radius: 1px;
  position: relative;
}

.text-document-icon:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 10px;
  height: 1.5px;
  background-color: #4aa4f6;
}

.text-document-icon:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 3px;
  width: 10px;
  height: 1.5px;
  background-color: #4aa4f6;
}

.file-details {
  flex: 1;
  overflow: hidden;
}

.file-name {
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-info {
  font-size: 12px;
  color: #b9bbbe;
  margin-top: 2px;
}
</style> 